<template>
    <el-form :model="userFollowUpAdd" label-width="120px" :rules="rules">

    <el-form-item label="客户" prop="user">
      <el-select v-model="userFollowUpAdd.user" placeholder="请选择客户" style="width: 100%;">
        <el-option v-for="item in userList" :label="item.label" :value="item.value" :key="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item label="跟进方式" prop="followUpMethods">
      <el-select v-model="userFollowUpAdd.followUpMethods" placeholder="请选择跟进方式" style="width: 100%;">
        <el-option label="电话" value="1" />
        <el-option label="短信" value="2" />
        <el-option label="实物邮件" value="3" />
        <el-option label="当面" value="4" />
      </el-select>
    </el-form-item>

    <el-form-item label="跟进时间" prop="followUpDate">
        <el-date-picker
          v-model="userFollowUpAdd.followUpDate"
          type="date"
          style="width: 100%"
        />
    </el-form-item>

    <el-form-item label="跟进内容" prop="followUpContent">
      <el-input v-model="userFollowUpAdd.followUpContent" type="textarea"/>
    </el-form-item>

    <el-form-item label="上传图片">
      <el-upload
    v-model:file-list="userFollowUpAdd.fileList"
    action="/api/upload/files"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
  >
    <el-icon><Plus /></el-icon>
    </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl"/>
  </el-dialog>
    </el-form-item>
  </el-form>
    
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import {getFollowAdd} from "@/api/followUp"
import {ref,reactive} from "vue"
import { ElMessage } from 'element-plus'
defineProps({
  userList: {
        type: Array<any>,
        required: true
    }
})
const userFollowUpAdd = reactive({
  user: "",
  followUpMethods: "",
  followUpDate: [],
  followUpContent: "",
  fileList: []
})
const sendFollowAdd = ()=>{
  getFollowAdd(userFollowUpAdd).then((res:any)=>{
     if(res.code === 10000){
      ElMessage({
        message: "数据添加成功",
        type: 'success',
     })
     }else {
      ElMessage({
        message: "数据添加失败",
        type: 'error',
     })
     }
  })
}
const handlePictureCardPreview=(uploadFile:any)=>{
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
const rules = reactive<any>({
  user: [
    {
      required: true,
      message: '客户不能为空',
      trigger: 'change',
    },
  ],
  followUpMethods: [
    {
      required: true,
      message: '跟进方式不能为空',
      trigger: 'change',
    },
  ],
  followUpDate: [
    {
      type: 'date',
      required: true,
      message: '跟进时间不能为空',
      trigger: 'change',
    },
  ]
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
defineExpose({
  sendFollowAdd,
})
</script>

<style scoped>

</style>